<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>团队管理</el-breadcrumb-item>
            <el-breadcrumb-item>团队列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card class="box-card">
            <el-row :gutter="10">
                <el-col :span="7">
                    <el-input placeholder="请输入创建人id" class="input-with-select" v-model="queryInfo.query" clearable @clear="getList">
                        <template #append>
                            <el-button @click="selectList">搜索</el-button>
                        </template>
                    </el-input>
                </el-col>

                <el-col :span="4"><el-button type="primary" @click="createTeam">创建团队</el-button></el-col>
            </el-row>

            <el-table v-loading="loading" :data="rolesList" stripe border style="width: 100%;" highlight-current-row size="small">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="name" label="团队名称" width="180"></el-table-column>
                <el-table-column prop="introduction" label="团队介绍" width="200" ></el-table-column>
                <el-table-column prop="note" label="团队备注" width="180"></el-table-column>
                <el-table-column prop="leader_id" label="创建人id" width="200"></el-table-column>
                <el-table-column prop="create_time" label="创建时间" width="200"></el-table-column>
                <el-table-column label="操作">
<!--                    <template v-slot="scope">-->
<!--                        <el-button type="primary" icocircle >修改</el-button>-->
<!--                        <el-button type="danger"  @click="deleteUser(scope.row.id)" icocircle>删除</el-button>-->
<!--                    </template>-->
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                v-model:currentPage=queryInfo.pageNum
                v-model:page-size=queryInfo.pageSize
                :page-sizes="[2, 5, 10, 20]"
                small="false"
                :disabled="disabled"
                layout="total, sizes, prev, pager, next, jumper"
                :total=queryInfo.total
                background>
            </el-pagination>

        </el-card>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import API from '../../network/team'

export default {
    data(){
        return{
            queryInfo:{
                query:'',
                pageNum: 1,
                pageSize: 2,
                total: 0
            },
            setRolesDialogVisible: false,
            userList: [],
            total:0,
            rolesList: [],               //所有角色的数据列表
            editDialogVisible: false,   //控制修改用户Dialog显示与隐藏
            dialogVisible: false,     //控制增加Dialog显示与隐藏
            userInfo: {},            //需要被分配角色的用户信息
            selectRoleId: '',       //选中的角色id值

            editForm: {},              //查询得到的对象
            editFormRules: {           //修改的表单验证
                email: [
                    {required:true,message:'请输入邮箱', trigger:'blur'},
                ],
                mobile: [
                    {required:true,message:'请输入邮箱', trigger:'blur'},
                ]
            },
        }
    },
    created() {
         this.getList()
    },
    methods:{
        getList() {
            API.GetList(this.queryInfo.pageNum).then(res=>{
                this.rolesList = res.data.data.data
                this.queryInfo.pageNum = res.data.data.current_page
                this.queryInfo.pageSize = res.data.data.currentPageSize
                this.queryInfo.total = res.data.data.total
                console.log(this.rolesList)
            })
        },

        selectList(){
            this.rolesList = this.rolesList.filter(item => item.leader_id === this.queryInfo.query)
        },

        createTeam(){
            this.$router.push("/createTeam")
        },

        //关闭重置表单
        addDialogClosed(){
            this.$refs.addFormRef.resetFields()
        },
    }
}
</script>

<style scoped>
.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

.el-pagination{
    padding-top: 60px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.setRole {
    line-height: 30px;
}


</style>
